<template>
    <div class="event-main">
        <div class="event-title">热门活动</div>
        <div class="event-list">
            <div
                v-for="(item, index) in dataList"
                :key="index"
                class="event-item"
                @click="eventClick(item)"
            >
                <div class="event-img">
                    <img :src="item.pic" alt="" />
                    <div v-if="item.status == 1" class="tips">
                        <div class="triangle-down"></div>
                        参与活动
                    </div>
                    <div v-else-if="item.status == 0" class="tips2">
                        <div class="triangle-down"></div>
                        已结束
                    </div>
                    <div v-else-if="item.status == 3" class="tips3">
                        <div class="triangle-down"></div>
                        未开始
                    </div>
                </div>
                <div class="title-date">
                    <div class="title">
                        {{ item.name }}
                    </div>
                    <div class="date">
                        {{ item.start_time }}-{{ item.end_time }}
                    </div>
                </div>
            </div>
        </div>

        <div v-show="mask1" class="mask">
            <img
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/ended.png"
                alt="已结束"
                @click="mask1 = false"
            />
        </div>

        <div v-show="mask2" class="mask">
            <img
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/notStarted.png"
                alt="已结束"
                @click="mask2 = false"
            />
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { get_activity } from "@/assets/api/indexApi";
export default {
    name: "QuizDataDetail",
    async asyncData({ route }) {
        let data = {
            mateInfo: {
                title: "活动中心",
                keywords: "",
                description: "",
            },
            relateddata: [],
            all_based_source: [],
            dataList: [],
        };

        return data;
    },
    components: {},
    layout: "home",
    head() {
        return {
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
            ],
        };
    },
    data() {
        return {
            mask1: false,
            mask2: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {},
    beforeMount() {},
    mounted() {
        this.get_activity();
        this.setmenuIndex("6");
    },
    watch: {},

    methods: {
        ...mapMutations("common", ["setmenuIndex", "setloginShow"]),
        async get_activity() {
            const res = await get_activity({});
            if (res.code == 1) {
                this.dataList = res.data;
            }
        },

        eventClick(item) {
            if (item.status == 0) {
                this.mask1 = true;
                // this.$alert("活动已结束", "提示", {
                //     confirmButtonText: "确定",
                // });
                return;
            }
            if (item.status == 3) {
                this.mask2 = true;

                // this.$alert("活动未开始", "提示", {
                //     confirmButtonText: "确定",
                // });
                return;
            }
            this.$router.push({
                path:
                    "/eventcentre/activity?pic=" +
                    encodeURIComponent(item.pic2),
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.mask {
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 999;
    img{
        width: 536px;
        height: 220px;
        cursor: pointer;
        display: block;
    }
}
.event-main {
    width: 1200px;
    background: #ffffff;
    border-radius: 36px;
    margin: 23px auto;
    padding: 33px 30px;
}
.event-title {
    font-weight: 500;
    font-size: 28px;
    color: #333333;
}
.event-list {
    padding-top: 31px;
    display: grid;
    grid-template-columns: 587px 552px;
}
.event-item {
    width: 552px;
    margin-bottom: 20px;
    cursor: pointer;
    .event-img {
        overflow: hidden;
        width: 100%;
        height: 201px;
        border-radius: 25px;
        position: relative;
        img {
            width: 100%;
            height: 201px;
            border-radius: 25px;
            object-fit: cover;
        }
        .tips {
            width: 103px;
            position: absolute;
            right: 0;
            bottom: 0;
            background: #ff1616;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            user-select: none;
        }
        .tips2 {
            width: 103px;
            position: absolute;
            right: 0;
            bottom: 0;
            background: #d8d8d8;
            height: 35px;
            line-height: 35px;
            padding-left: 20px;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            user-select: none;
            .triangle-down {
                border-bottom-color: #d8d8d8;
            }
        }
        .tips3 {
            width: 103px;
            position: absolute;
            right: 0;
            bottom: 0;
            background: #0f87ff;
            height: 35px;
            line-height: 35px;
            padding-left: 20px;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            user-select: none;
            .triangle-down {
                border-bottom-color: #0f87ff;
            }
        }
        .triangle-down {
            position: absolute;
            bottom: 0;
            right: 103px;
            width: 0;
            height: 0;
            border-bottom: 35px solid #ff1616;
            border-left: 20px solid transparent;
        }
    }

    .title-date {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 28px;
        .title {
            font-weight: 500;
            font-size: 22px;
            color: #666666;
            width: 280px; /* 或者任何固定宽度 */
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 文本溢出显示省略号 */
        }
        .date {
            font-weight: 500;
            font-size: 18px;
            color: #666666;
        }
    }
}
</style>
